<template>
	<view class="statistics-container">
		<!-- 自定义导航栏 -->
		<custom-navbar title="经营统计"></custom-navbar>
		
		<!-- 时间筛选 -->
		<view class="time-filter">
			<view class="filter-tabs">
				<view class="tab-item active">今日</view>
				<view class="tab-item">昨日</view>
				<view class="tab-item custom">
					<image src="/static/calendar.png" class="calendar-icon"></image>
					<text>自定义</text>
				</view>
			</view>
		</view>
		
		<!-- 数据概览 -->
		<view class="overview-section">
				<view class="overview-cards">
					<view class="overview-card">
						<view class="card-icon">
						<image src="/static/wallet-icon.png" class="icon-img"></image>
						</view>
						<view class="card-content">
						<view class="card-value">¥2066.56</view>
							<view class="card-label">收入</view>
						</view>
					</view>
					
					<view class="overview-card">
						<view class="card-icon">
						<image src="/static/list-icon.png" class="icon-img"></image>
						</view>
						<view class="card-content">
						<view class="card-value">53</view>
							<view class="card-label">订单量</view>
						</view>
					</view>
				</view>
		</view>
		
		<!-- 收入分布 -->
		<view class="revenue-section">
				<view class="section-title">收入分布</view>
				<view class="chart-container">
				<view class="donut-chart-wrapper">
					<!-- 饼图 -->
					<view class="pie-chart">
						<view class="pie-center">
							<view class="center-title">总收入</view>
							<view class="center-value">¥2066.56</view>
						</view>
						<view class="pie-slice orange" style="transform: rotate(0deg);"></view>
						<view class="pie-slice purple" style="transform: rotate(74deg);"></view>
						</view>
					</view>
					<view class="chart-legend">
					<view class="legend-item">
						<view class="legend-color purple"></view>
						<text class="legend-text">洗车 500元</text>
					</view>
					<view class="legend-item">
						<view class="legend-color orange"></view>
						<text class="legend-text">保养 1566.56元</text>
					</view>
					<view class="legend-item">
						<view class="legend-color purple"></view>
						<text class="legend-text">洗车 占比26%</text>
					</view>
					<view class="legend-item">
						<view class="legend-color orange"></view>
						<text class="legend-text">保养 占比74%</text>
						</view>
					</view>
				</view>
		</view>
		
		<!-- 订单分布 -->
		<view class="order-section">
				<view class="section-title">订单分布</view>
				<view class="bar-chart-container">
				<view class="bar-chart-wrapper">
					<!-- Y轴标签 -->
						<view class="y-axis">
						<view class="y-label">350</view>
						<view class="y-label">300</view>
						<view class="y-label">250</view>
						<view class="y-label">200</view>
						<view class="y-label">150</view>
						<view class="y-label">100</view>
						<view class="y-label">50</view>
						<view class="y-label">0</view>
					</view>
					
					<!-- 柱状图 -->
					<view class="bars-container">
						<view class="bar-item">
							<view class="bar-column blue" style="height: 300px;"></view>
							<view class="bar-label">维修</view>
						</view>
						<view class="bar-item">
							<view class="bar-column light-blue" style="height: 170px;"></view>
							<view class="bar-label">保养</view>
						</view>
						<view class="bar-item">
							<view class="bar-column orange" style="height: 346px;"></view>
							<view class="bar-label">洗车</view>
							</view>
						</view>
					</view>
					<view class="bar-legend">
					<view class="legend-item">
						<view class="legend-color blue"></view>
						<text class="legend-text">维修 300单</text>
					</view>
					<view class="legend-item">
						<view class="legend-color light-blue"></view>
						<text class="legend-text">保养 170单</text>
					</view>
					<view class="legend-item">
						<view class="legend-color orange"></view>
						<text class="legend-text">洗车 346单</text>
						</view>
					</view>
				</view>
				</view>
	</view>
</template>

<script>
export default {
	components: {
		'custom-navbar': () => import('@/components/custom-navbar.vue')
	},
	data() {
		return {
			
		}
	},
	methods: {
		
	}
}
</script>

<style lang="scss" scoped>
.statistics-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
	padding-top: calc(env(safe-area-inset-top) + 88rpx);
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		top: calc(env(safe-area-inset-top) + 88rpx);
		left: 0;
		right: 0;
		height: 600px;
		background-image: linear-gradient(
			to bottom,
			#2f81fa 0%, #2f81fa 33.33%,
			#f7f7f7 33.33%, #f7f7f7 100% 
		);
		background-repeat: no-repeat;
		z-index: 0;
	}
}

.time-filter {
	position: relative;
	z-index: 1;
	background: #ffffff;
	padding: 20rpx 40rpx;
	border-radius: 20rpx 20rpx 0 0;
	margin: -20rpx 20rpx 0;
	
	.filter-tabs {
		display: flex;
		gap: 0;
		
		.tab-item {
			flex: 1;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #333333;
			background: #f8f8f8;
			border-radius: 20rpx;
			margin-right: 10rpx;
			
			&:last-child {
				margin-right: 0;
			}
			
			&.active {
				background: #007AFF;
				color: #ffffff;
			}
			
			&.custom {
		display: flex;
		align-items: center;
		gap: 8rpx;
				
				.calendar-icon {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
}

.overview-section {
	position: relative;
	z-index: 1;
	padding: 20rpx;
	margin-bottom: 20rpx;
	
	.overview-cards {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 40rpx;
		display: flex;
		gap: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		
		.overview-card {
			flex: 1;
			display: flex;
			align-items: center;
			padding: 32rpx 24rpx;
			
			.card-icon {
				margin-right: 20rpx;
				
				.icon-img {
					width: 60rpx;
					height: 60rpx;
				}
			}
			
			.card-content {
				flex: 1;
				
				.card-value {
					font-size: 36rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 8rpx;
				}
				
				.card-label {
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}
}

.revenue-section {
	position: relative;
	z-index: 1;
	padding: 20rpx;
	margin-bottom: 20rpx;
	
	.section-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 32rpx;
	}
	
	.chart-container {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 40rpx;
		display: flex;
		align-items: center;
		gap: 40rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		
		.donut-chart-wrapper {
			width: 400rpx;
			height: 400rpx;
			position: relative;
			
			.pie-chart {
				width: 400rpx;
				height: 400rpx;
				position: relative;
				border-radius: 50%;
				overflow: hidden;
				
				.pie-center {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
			width: 200rpx;
			height: 200rpx;
					background: #ffffff;
			border-radius: 50%;
			display: flex;
					flex-direction: column;
			align-items: center;
			justify-content: center;
					z-index: 3;
					
					.center-title {
					font-size: 24rpx;
					color: #666666;
					margin-bottom: 8rpx;
				}
				
				.center-value {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					}
				}
				
				.pie-slice {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
					
					&.orange {
						background: conic-gradient(#FF6B35 0deg 266.4deg, transparent 266.4deg 360deg);
					}
					
					&.purple {
						background: conic-gradient(#8E44AD 266.4deg 360deg, transparent 0deg 266.4deg);
					}
				}
			}
		}
		
		.chart-legend {
			flex: 1;
			
			.legend-item {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				
				.legend-color {
					width: 20rpx;
					height: 20rpx;
					border-radius: 4rpx;
					margin-right: 12rpx;
					
					&.orange {
						background-color: #FF6B35;
					}
					
					&.purple {
						background-color: #8E44AD;
					}
				}
				
				.legend-text {
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}
}

.order-section {
	position: relative;
	z-index: 1;
	padding: 20rpx;
	margin-bottom: 20rpx;
	
	.section-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 32rpx;
	}
	
	.bar-chart-container {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 40rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		
		.bar-chart-wrapper {
			width: 100%;
			height: 400rpx;
			margin-bottom: 32rpx;
			display: flex;
			align-items: flex-end;
			gap: 20rpx;
			
			.y-axis {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100%;
				width: 60rpx;
				
				.y-label {
					font-size: 20rpx;
					color: #666666;
					text-align: right;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
			
			.bars-container {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: flex-end;
				gap: 40rpx;
				padding-left: 20rpx;
				
				.bar-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					height: 100%;
					
					.bar-column {
						width: 60rpx;
						border-radius: 8rpx 8rpx 0 0;
						margin-bottom: 20rpx;
						transition: all 0.3s ease;
						
						&.blue {
							background-color: #007AFF;
						}
						
						&.light-blue {
							background-color: #4A90E2;
						}
						
						&.orange {
							background-color: #FF6B35;
						}
					}
					
					.bar-label {
						font-size: 24rpx;
						color: #333333;
						text-align: center;
					}
				}
			}
		}
		
		.bar-legend {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			
			.legend-item {
				display: flex;
				align-items: center;
				
				.legend-color {
					width: 20rpx;
					height: 20rpx;
					border-radius: 4rpx;
					margin-right: 8rpx;
					
					&.blue {
						background-color: #007AFF;
					}
					
					&.light-blue {
						background-color: #4A90E2;
					}
					
					&.orange {
						background-color: #FF6B35;
					}
				}
				
				.legend-text {
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}
}
</style>
